<template>
  <KView class="sys-scroll-view">
    <KScrollView ref="scrollView" :scroll-top="scrollTop" scroll-y scroll-with-animation style="height:100%" :upper-threshold="upperThreshold"
      :lower-threshold="lowerThreshold" @scroll="scroll" @scrolltoupper="scrollToUpper" @scrolltolower="scrollToLower">
      <KView class="sys-scroll-view-content">
        <slot></slot>
      </KView>
    </KScrollView>

    <back-top :style="backTopStyle" :has-top="hasTop" @to-top="toTop"></back-top>
    
    <KView v-if="isProfile" class="sys-scroll-view-profile" :style="profileStyle" @click="openProfile">
      <img class="sys-img" :src="profileImg" mode="aspectFit">
    </KView>
  </KView>
</template>

<script>
  import BackTop from './backTop';
  import SystemUtil from 'utils/systemUtil';
  import GlobalData from 'utils/globalData';

  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    props: {
      upperThreshold: {
        type: String,
        default: '10px'
      },
      lowerThreshold: {
        type: String,
        default: '10px'
      },
      isToTop: {
        type: Boolean,
        default: true
      },
      isProfile: {
        type: Boolean,
        default: false
      }
    },

    computed: {
      backTopStyle() {
        let height = this.height * 750 / this.width;
        height = Math.ceil(height);
        let top = height - 632;
        if (top <= 50) {
          top = 50;
        }

        return {
          top: SystemUtil.formatPx(top)
        };
      },
      profileStyle() {
        let height = this.height * 750 / this.width;
        height = Math.ceil(height);
        let top = height - 280;
        if (top <= 380) {
          top = 380;
        }
        return {
          top: SystemUtil.formatPx(top)
        };
      }
    },

    data() {
      return {
        scrollTop: '0px',
        hasTop: false,
        profileImg:GlobalData.images.backTop.personalProfile
      };
    },

    methods: {
      scroll(event) {
        if (!this.isToTop) {
          this.hasTop = false;
        } else {
          let hasTop;
          let scrollTop = event.detail.scrollTop;
          if (scrollTop > 100) {
            hasTop = true;
          } else {
            hasTop = false;
          }
          this.hasTop = hasTop;
        }
        this.$emit('scroll', event.detail);
      },

      scrollToUpper() {
        this.$emit('scrolltoupper');
      },

      scrollToLower() {
        this.$emit('scrolltolower');
      },

      toTop() {
        let scrollTop = this.scrollTop;
        scrollTop = scrollTop === '0px' ? '-1px' : '0px';
        this.scrollTop = scrollTop;
        this.hasTop = false;
      },

      openProfile(){
        this.$emit('open-profile');
      }
    },

    components: {
      BackTop
    }
  };

</script>

<style lang="scss">
  .sys-scroll-view {
    height: 100%;
    overflow: auto;
    position: relative;

    .sys-scroll-view-content {
      padding: 0 formatPx(30);
      height: calc(100% - #{formatPx(5)});
    }

    .back-top {
      position: absolute;
      right: formatPx(30);
    }

    .sys-scroll-view-profile {
      position: absolute;
      right: formatPx(30);
      width: formatPx(84);
      height: formatPx(84);
    }
  }

</style>
